<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Slashdot's Menu</title>
	<link rel="stylesheet" type="text/css" href="sdmenu.css" />
	<script type="text/javascript" src="sdmenu.js">
		/***********************************************
		* Slashdot Menu script- By DimX
		* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
		* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
		***********************************************/
	</script>
	<script type="text/javascript">
	// <![CDATA[
	var myMenu;
	window.onload = function() {
		myMenu = new SDMenu("my_menu");
		myMenu.init();
	};
	// ]]>
	</script>
  </head>
  <body>
    <form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false">
      <fieldset><legend>Menu actions</legend>
        <label for="speed">Speed (1-5):</label>
        <input type="text" id="speed" value="3" size="1" onchange="myMenu.speed = parseInt(this.value)" />
        &nbsp;&nbsp;&nbsp;
        <label for="oneSmOnly">One submenu at a time:</label>
        <select id="oneSmOnly" onchange="myMenu.oneSmOnly = this.selectedIndex"><option>false</option><option>true</option></select>
        &nbsp;&nbsp;&nbsp;
        <select name="smNr"><option>1</option><option>2</option><option>3</option><option>4</option></select>
        <input type="button" value="Expand" onclick="myMenu.expandMenu(myMenu.submenus[smNr.selectedIndex])" />
        <input type="button" value="Collapse" onclick="myMenu.collapseMenu(myMenu.submenus[smNr.selectedIndex])" />
        <input type="button" value="Toggle" onclick="myMenu.toggleMenu(myMenu.submenus[smNr.selectedIndex])" />
        &nbsp;&nbsp;&nbsp;
        <input type="button" value="Expand all" onclick="myMenu.expandAll()" />
        <input type="button" value="Collapse all" onclick="myMenu.collapseAll()" />
      </fieldset>
    </form>

    <div style="float: left" id="my_menu" class="sdmenu">
      <div> 
      <span>TIN XÃ HỘI</span> 
      <a href="#">Giáo dục</a> 
      <a href="#">Kinh tế</a> 
      <a href="#">Thể thao</a> 
      <a href="#">Pháp luật</a> 
      <a href="#">Công nghệ</a> 
      </div>
      <div> 
      <span>Sưu tập</span> 
      <a href="#">Sài gòn xưa</a> 
      <a href="#">Ca dao</a> 
      <a href="#">Văn thơ sưu tập</a> 
      </div>
      <div> 
      <span>GIẢI TRÍ</span> 
      <a href="#">Thơ hay</a> 
      <a href="#">Ảnh đẹp</a> 
      <a href="#">Âm nhạc</a> 
      </div>
      <div> 
      <span>Nghệ thuật sống</span> 
      <a href="#">Sống đẹp</a> 
      <a href="#">Tấm lòng vàng</a> 
      <a href="#">Nhịp cầu nhân ái</a> 
      </div>
    </div>
<div style="padding-left: 200px">
      <pre>
var myMenu = new SDMenu("main_menu"); // ID of the menu element
// Default values...
myMenu.speed = 3;                     // Menu sliding speed (1 - 5 recomended)
myMenu.remember = true;               // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false;             // One expanded submenu at a time
myMenu.markCurrent = true;            // Mark current link / page (link.href == location.href)

myMenu.init();

// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // Expand a submenu
myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded

myMenu.expandAll();                   // Expand all submenus
myMenu.collapseAll();                 // Collapse all submenus
      </pre>
      <p>Download: <a href="sdmenu.zip">sdmenu.zip</a></p>
    </div>
  </body>
</html>